<template>
    <StarBackground />
    <div class="login">
        <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form conic">
            <h3 class="title">蜗易Admin通用框架</h3>
            <el-form-item prop="username">
                <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
                    <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码"
                    @keyup.enter="handleLogin">
                    <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
                </el-input>
            </el-form-item>
            <el-form-item prop="captcha" v-if="captchaEnabled" class="captcha">
                <el-input v-model="loginForm.captcha" size="large" auto-complete="off" placeholder="验证码"
                    @keyup.enter="handleLogin" class="captcha-input">
                    <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
                </el-input>
                <div class="login-code">
                    <img :src="codeUrl" @click="getCode" class="login-code-img" />
                </div>
            </el-form-item>
            <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
            <el-form-item style="width:100%;">
                <el-button :loading="loading" size="large" type="primary" style="width:100%;"
                    @click.prevent="handleLogin">
                    <span v-if="!loading">登 录</span>
                    <span v-else>登 录 中...</span>
                </el-button>
                <div style="float: right;" v-if="register">
                    <router-link class="link-type" :to="'/register'">立即注册</router-link>
                </div>
            </el-form-item>
            <SocialLogin ref="socialRef" />
        </el-form>
        <!--  底部  -->
        <div class="el-login-footer">
            <span>Copyright © 2024-2024 IM.Easy All Rights Reserved.</span>
            <Privacy />
        </div>
    </div>
</template>

<script setup>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from '@/store/modules/user'
import SocialLogin from "./components/social"
import StarBackground from "./components/star"
import Privacy from "@/components/Privacy";
const userStore = useUserStore()
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const loginRef = ref();
const socialRef = ref();

const loginForm = ref({
    username: "test",
    password: "123456",
    rememberMe: false,
    captcha: "",
    connectionId: ""
});

const loginRules = {
    username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
    password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
    captcha: [{ required: true, trigger: "blur", message: "请输入验证码" }]
};

const codeUrl = ref("");
const loading = ref(false);
// 验证码开关
const captchaEnabled = ref(false);
// 注册开关
const register = ref(false);
const redirect = ref(undefined);

watch(route, (newRoute) => {
    redirect.value = newRoute.query && newRoute.query.redirect;
}, { immediate: true });

//登录
function handleLogin() {
    if (loginForm.value.username == 'admin') handlePasswordGrant();
    else handleGiteeLogin();
}

//密码方式登录
function handlePasswordGrant() {
    loginRef.value.validate().then(() => {
        loading.value = true;

        // 处理记住密码逻辑
        if (loginForm.value.rememberMe) {
            Cookies.set("username", loginForm.value.username, { expires: 30 });
            Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
            Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
        } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
        }

        // 调用登录方法
        return userStore.login(loginForm.value);
    }).then(res => {
        const query = route.query;
        const otherQueryParams = Object.fromEntries(
            Object.entries(query).filter(([key]) => key !== "redirect")
        );
        router.push({ path: redirect.value || "/", query: otherQueryParams });
    }).catch(() => {
        loading.value = false;
        // 重新获取验证码
        if (captchaEnabled.value) {
            getCode();
            loginForm.value.captcha = '';
        }
    });
}

function handleGiteeLogin() {
    loading.value = true;
    socialRef.value.login("Gitee");
}

function getCode() {
    getCodeImg().then(res => {
        captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (captchaEnabled.value) {
            codeUrl.value = "data:image/gif;base64," + res.img;
            loginForm.value.connectionId = res.connectionId;
        }
    });
}

function getCookie() {
    const username = Cookies.get("username");
    const password = Cookies.get("password");
    const rememberMe = Cookies.get("rememberMe");
    loginForm.value = {
        username: username === undefined ? loginForm.value.username : username,
        password: password === undefined ? loginForm.value.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
    };
}

getCode();
getCookie();
</script>

<style lang='scss' scoped>
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-size: cover;
}

.title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #fff;
}

.login-form {
    border-radius: 6px;
    // background: #242222a1;
    width: 400px;
    padding: 25px 25px 5px 25px;

    .el-input {
        height: 40px;

        input {
            height: 40px;
        }
    }

    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 0px;
    }
}


.captcha {
    :deep(.el-form-item__content) {
        gap: 12px !important;
    }

    .login-code {
        height: 40px;
        float: right;

        img {
            cursor: pointer;
            vertical-align: middle;
        }
    }

    .captcha-input {
        flex: 1;
        flex-basis: 63%;
    }

    .login-code-img {
        height: 40px;
    }
}


.el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}



*,
*::before,
*::after {
    box-sizing: border-box;
}

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

.conic {
    position: relative;
    z-index: 0;
    border-radius: 10px;
    overflow: hidden;
}

.conic::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #1a232a;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(transparent, rgb(17 212 227), transparent 30%);
    animation: rotate 6s linear infinite;
}

.conic::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: #000;
    border-radius: 5px;
}

.conic-demo::after {
    animation: opacityChange 5s infinite linear;
}

@keyframes opacityChange {
    50% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }
}
</style>